<script>
import axios from "axios";
import req from "@/utils/request"
export default {
  name: "Register",
  data(){
    return {
      username: "",
      password: "",
    }
  },
  methods:{
    RegisterOnclick(){
      (async () => {
        const res = await req.post("/user/add", {
          "username": this.username,
          "password": this.password,
          "name": "65441",
          "phone": "651",
          "email": "651",
          "address": "216",
          "avatar": "61",
        })
        console.log(res)
      })()
    }
  }
}
</script>

<template>
  <div class="register-page">
    <div style="width: 500px; height: 300px; border-radius: 20px; display: flex; background-color: #fff">
      <div style="flex: 1; display: flex; justify-content: center; align-items: center">
        <img src="../assets/img/LoginImg.png" alt="" style="width: 200px; height: 200px">
      </div>
      <div style="flex: 1; display: flex; flex-direction: column">
        <div style="flex: 1; display: flex; align-items: center; justify-content: center">
          <span style="margin-top: 20px">后台管理系统注册</span>
        </div>
        <div style="flex: 3; display: flex; flex-direction: column; align-items: center; justify-content: center">
          <input type="text" placeholder="请输入账号" style="width: 200px; height: 30px; margin-top: 5px" v-model="username">
          <input type="text" placeholder="请输入密码" style="width: 200px; height: 30px; margin-top: 5px" v-model="password">
          <input type="text" placeholder="请输入验证码" style="width: 100px; height: 30px; margin-top: 5px; margin-left: -100px">
          <el-button style="background-color: lightgreen; color: white; width: 208px; margin-top: 5px" @click="RegisterOnclick">注册</el-button>
        </div>
        <div style="flex: 1; display: flex; align-items: center; justify-content: center">
          <router-link to="/Login">切换登录</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.register-page {
  background-color: lightgreen;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
</style>